<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>Javascript的DOM获取元素</h1>
<hr>
<ul type="square">
    <li id="mylove" class="server">Java</li>
    <li class="web">HTML</li>
    <li class="web">Css</li>
    <li class="web">Javascript</li>
    <li class="server">C++</li>
</ul>

<ul>
    <li class="fruit">apple</li>
    <li class="fruit">banana</li>
    <li class="vg">tomato</li>
    <li class="fruit">watermelon</li>
    <li class="vg">onion</li>
    <li id="mylove2">grape</li>
</ul>

<form>
    <input type="checkbox" name="favorites" value="read">read</input>
    <input type="checkbox" name="favorites" value="music">music</input>
    <input type="checkbox" name="favorites" value="movie">movie</input>
    <input type="checkbox" name="favorites" value="game">game</input>
</form>


<script>
    let nodes = document.getElementsByTagName("li");
    let node = document.getElementById("mylove");
    console.log(node.innerText);

    console.log("------------------------------");
    for(let n of nodes){
        console.log(n.innerText);
    }

    console.log("------------------------------");
    nodes = document.getElementsByName("favorites");
    for(let n of nodes){
        console.log(n.value);
    }

    console.log("------------------------------");
    nodes = document.getElementsByClassName("web");

    for(let n of nodes){
        console.log(n.innerText);
    }

    console.log("------------------------------");
    console.log(document.querySelector(".fruit").innerText);
    console.log(document.querySelector("#mylove2").innerText);
    document.querySelectorAll(".vg").forEach(function(n,i){
        console.log(n.innerText);
    })
</script>
</body>
</html>